<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import Panel from '../components/Panel.vue'
import util from '@/utils/util'
import {validateForm} from '@/utils/element-helper'
import {useRouter} from "vue-router";
import {appStore} from "@/store/user";
import Background from "@components/Background";
import {commonStore} from "@/store/common";


const formRef = ref(null);
const router = useRouter();
const state = reactive({
  form: {
    name: '',
    pass: '',
  },
  error: "",
  loading: false,
  rules: {
    name: [
      {required: true, message: '账号不能为空', trigger: 'blur'},
    ],
    pass: [
      {required: true, message: '密码不能为空', trigger: 'blur'},
      {min: 5, max: 25, message: '密码长度在 5 到 25 位之间', trigger: 'blur'},
      {
        validator: (rule, value, callback) => {
          callback();
        }, trigger: 'blur'
      }
    ],
  }
});

const store = appStore()
const commonStore1 = commonStore()
commonStore1.loadDict()

function submitForm(formName) {
  validateForm(formRef.value, formName, () => _submit())
}

async function _submit() {
  state.loading = true
  store.login(state.form, async () => {
    await router.push({path: "/dashboard"})
    state.loading = false
  }, async (res,err) => {
    state.loading = false
    formRef.value.resetFields()
    state.error = null
    await nextTick(() => {
      state.error = util.isNull(err) ? util.isNull(res.data.msg)?"账号密码错误" : res.data.msg: err
      state.loading = false
    })
  })
}

onMounted(() => {
  // 主页添加键盘事件,注意,不能直接在焦点事件上添加回车
  document.onkeydown = (event) => {
    if (event.keyCode === 13) {
      submitForm('form')
    }
  }
});
</script>

<template>
  <background>
    <panel title="登录" type="panel-primary login-panel"
           pstyle="-webkit-box-shadow: 0 0 50px rgba(0, 0, 0, .2);box-shadow: 0 0 50px rgba(0, 0, 0, .2);">
      <template v-slot:body>
        <div style="text-align: center;margin-bottom: 20px">
          <div class="sking-admin-logo">{{commonStore1.systemName}}</div>
        </div>
        <el-form ref="formRef" :model="state.form" label-width="80px" status-icon :rules="state.rules"
                 v-loading="state.loading"
                 label-position="right">
          <el-form-item label="账号：" prop="name" :error="state.error">
            <el-input v-model="state.form.name" autocomplete="new-password" placeholder="账号/邮箱/手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="pass">
            <el-input v-model="state.form.pass" type="password" autocomplete="new-password"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <div class="register-div">
<!--            没有账号？-->
<!--            <router-link to="/register">立即注册</router-link>-->
          </div>
          <div>
            <el-button type="primary" style="width: 100%;" @click="submitForm('form')"
                       @keyup.enter="submitForm('form')">
              提交
            </el-button>
          </div>
        </el-form>
      </template>
    </panel>
  </background>
</template>


<style lang="scss" scoped>

.login-panel {
  width: 350px;
  min-height: 350px;
}

.register-div {
  margin: 50px 0 20px 0;
  text-align: center;
  font-size: 13px;
}



</style>
